<template>
    <div>
        <nav-header>
            <template v-slot:title>商品列表</template>
        </nav-header>
        <div style="background-color: #A25F32;padding-bottom: 5px;text-align: center;color: #fff">{{open_at}}</div>

        <div class="filter-option-container">
            <div class="row">
                <div class="col-xs-3">
                    <a href="javascript:;" v-if="sort_price_desc" @click="sortPrice">价格从高到低</a>
                    <a href="javascript:;" v-else @click="sortPrice">价格从低到高</a>
                </div>
                <div class="col-xs-3">
                    <a href="javascript:;" v-if="sort_is_buy" @click="sortIsBuy">未购买</a>
                    <a href="javascript:;" v-else @click="sortIsBuy">全部</a>
                </div>
                <div class="col-xs-6 collection-pagination">
                    <a href="javascript:;" v-for="page in pages" :class="{active: page.active}"
                       @click="pageEvent(page)">{{page.num}}</a>
                </div>
            </div>
        </div>

        <div class="container-fluid">

            <div style="margin-bottom: 20px" class="row" v-for="i in rows">
                <div class="col-xs-6" v-if="data[(i - 1) * col] != undefined" style="padding: 0 5px;">
                    <div @click="view(data[(i - 1) * col].id)" class="collection-card">
                        <div style="position: relative">
                            <img :src="data[(i - 1) * col].img[0]"/>
                            <div class="center" v-if="data[(i - 1) * col].status == 1"><p>已售完</p>
                                <p>SOLD OUT</p></div>
                            <div class="center" v-else-if="data[(i - 1) * col].status == 2"><p>待开放</p>
                                <p>TO be open</p></div>
                        </div>
                        <p>{{data[(i - 1) * col].name}}</p>
                        <p class="price">￥{{data[(i - 1) * col].price}}</p>
                        <!--                        <div class="detail"><a :href="'/collection-detail/' + venue_id + ',' + data[(i - 1) * col].id">查看</a>-->
                        <div class="detail"><a href="javascript:;">查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6" v-if="data[i * col - 1] != undefined" style="padding: 0 5px;">
                    <div @click="view(data[i * col - 1].id)" class="collection-card">
                        <div style="position: relative">
                            <img :src="data[i * col - 1].img[0]"/>
                            <div class="center" v-if="data[i * col - 1].status == 1"><p>已售完</p>
                                <p>SOLD OUT</p></div>
                            <div class="center" v-else-if="data[i * col - 1].status == 2"><p>待开放</p>
                                <p>TO be open</p></div>
                        </div>
                        <p>{{data[i * col - 1].name}}</p>
                        <p class="price">￥{{data[i * col - 1].price}}</p>
                        <!--                        <div class="detail"><a :href="'/collection-detail/'+venue_id + ',' + data[i * col - 1].id">查看</a>-->
                        <div class="detail"><a href="javascript:;">查看</a>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";

    export default {
        components: {NavHeader},
        data() {
            return {
                rows: 0,
                col: 2,
                sort_price_desc: true,
                sort_is_buy: true,

                venue_id: '',
                open_at: '',
                pages: [
                    // {
                    //     num: 1,
                    //     active: false,
                    // },{
                    //     num: 2,
                    //     active: false,
                    // },{
                    //     num: 3,
                    //     active: false,
                    // },{
                    //     num: 4,
                    //     active: false,
                    // },
                ],
                data: [
                    {
                        id: 0,
                        img: '',
                        price: '',
                        status: 0,
                    },
                    // {
                    //     id: 11,
                    //     img: 'https://exp-picture.cdn.bcebos.com/a007a9b1eef97fbd48b96b00b74133bad2413318.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fquality%2Cq_80',
                    //     name: '张书本1801-2',
                    //     price: '3000.23',
                    //     status: 0,
                    // },
                    // {
                    //     id: 12,
                    //     img: 'https://exp-picture.cdn.bcebos.com/a007a9b1eef97fbd48b96b00b74133bad2413318.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fquality%2Cq_80',
                    //     name: '张书本1801-3',
                    //     price: '2900.12',
                    //     status: 1,
                    // },
                    // {
                    //     id: 13,
                    //     img: 'https://exp-picture.cdn.bcebos.com/a007a9b1eef97fbd48b96b00b74133bad2413318.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fquality%2Cq_80',
                    //     name: '张书本1801-4',
                    //     price: '3300.22',
                    //     status: 2,
                    // },
                ],
                dataOrginal: []
            }
        },
        created() {
            this.venue_id = this.$route.params.vid;
        },
        mounted() {
            // this.rows = Math.ceil(this.data.length / this.col);
            // this.dataOrginal = this.data;
            this.getCollections();
        },
        methods: {
            sortPrice() {
                this.sort_price_desc = !this.sort_price_desc;
                let that = this;
                this.data.sort(function (a, b) {
                    if (that.sort_price_desc) {
                        return (a.price - b.price);
                    } else {
                        return (b.price - a.price);
                    }
                })

            },
            sortIsBuy() {
                this.sort_is_buy = !this.sort_is_buy;
                this.data = this.dataOrginal;
                if (!this.sort_is_buy) {
                    this.data = this.data.filter(function (item) {
                        return (item.status == 0);
                    });
                }
            },
            pageEvent(page) {
                this.pages.forEach(function (item) {
                    item.active = false;
                });
                page.active = true;
            },
            getCollections() {
                let that = this;
                this.api.getCollections(this.venue_id).then(res => {
                    if (res.data) {
                        that.dataOrginal = that.data = res.data;
                        that.rows = Math.ceil(that.data.length / that.col);
                    }
                })
            },
            view(cid) {
                window.location.href = '/collection-detail/' + this.venue_id + ',' + cid;
            }

        },
    }
</script>
<style scoped>

    .col-xs-3 {
        padding: 0;
    }

    .filter-option-container {
        text-align: center;
        padding: 15px;
    }

    .filter-option-container a {
        color: #000;
    }

    .collection-pagination a {
        display: inline-block;
        margin-right: 5px;
        width: 20px;
        height: 20px;
        border-radius: 10px;
    }

    .collection-pagination a.active {
        background-color: #A25F32;
        color: #fff;
    }

    .collection-card {
        border-radius: 10px;
        padding-top: 20px;
        padding-bottom: 10px;
        background-color: white;
        box-shadow: 0 0 8px 3px #eeeeee;
        position: relative;
    }

    .collection-card img {
        width: 100%;
        /*min-height: 80px;*/
        background-color: rgb(238, 238, 238);
        margin-bottom: 20px;
        text-align: center;
    }

    .collection-card p {
        margin-left: 10px;
    }

    .collection-card .price {
        font-weight: bold;
        color: #C8804F;
        font-size: 18px;
    }

    .collection-card .detail {
        position: absolute;
        bottom: 20px;
        right: 0;
        background-color: rgb(238, 238, 238);
        line-height: 24px;
        border-radius: 12px 0 0 12px;

    }

    .collection-card .detail a {
        color: gray;
        padding-right: 20px;
        padding-left: 10px;
        text-align: right;
    }


    .collection-card .center {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -59%);
        color: #fff;
        background-color: rgba(0, 0, 0, .4);
        text-align: center;
        padding-top: 20px;
    }


    .collection-card .center p {
        margin: 0;
    }

</style>
